<template>
	<view class="outBox">
		<u-navbar leftText="个人信息维护" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
			<view class="left-slot" slot="left">
				<u-icon name="arrow-left" color="#fff"></u-icon>
				<text>{{ '个人信息维护' }}</text>
			</view>
		</u-navbar>
		<VideoBox>
			<template #content>
				<view class="items">
					<view class="item item1">
						<view class="name">
							<text>头像</text>
						</view>
						<view class="value" @click="showUploadAvatar">
							<view class="userImg">
								<image :src="userInfo.avatar" mode="scaleToFill"></image>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="name">
							<text>性别</text>
						</view>
						<view class="value">
							<view class="info">
								<text>{{ userInfo.sex == '' ? '请选择' : userInfo.sex }}</text>
							</view>
							<view class="icon">
								<image :src="baseImgUrl + '/mine/right.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="item" @click="this.$refs.diaBoxRef4.show = true">
						<view class="name">
							<text>昵称</text>
						</view>
						<view class="value">
							<view class="info">
								<text>{{ userInfo.nickName }}</text>
							</view>
							<view class="icon">
								<image :src="baseImgUrl + '/mine/right.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="item" @click="handleAuthentication">
						<view class="name">
							<text>实名认证</text>
						</view>
						<view class="value">
							<view class="info">
								<image v-if="userInfo.isCheckRealName" :src="baseImgUrl2 + '/mine/icon7.png'"
									mode="widthFix"></image>
								<image v-else="userInfo.isCheckRealName" :src="baseImgUrl2 + '/mine/icon8.png'"
									mode="widthFix"></image>
								<text>{{ userInfo.isCheckRealName == 0 ? '未完成' : '已完成' }}</text>
							</view>
							<view class="icon">
								<image :src="baseImgUrl + '/mine/right.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="item" @click="handleSigning">
						<view class="name">
							<text>合作授权状态</text>
						</view>
						<view class="value">
							<view class="info">
								<image v-if="userInfo.isSigning === 3" :src="baseImgUrl2 + '/mine/icon7.png'"
									mode="widthFix"></image>
								<image v-else-if="userInfo.isSigning === 0 || userInfo.isSigning === 4"
									:src="baseImgUrl2 + '/mine/icon8.png'" mode="widthFix"></image>
								<text>{{SIGNING_STATUS[userInfo.isSigning] || '未签约'}}</text>
							</view>
							<view class="icon">
								<image :src="baseImgUrl + '/mine/right.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>

					<view class="item">
						<view class="name">
							<text>通讯手机</text>
						</view>
						<view class="value">
							<view class="info">
								<view class="tag" @click="handleUnBind" v-if="userInfo.mobile">
									<text>解绑</text>
								</view>
								<view class="tag" v-else @click="handleBind">
									<text>绑定</text>
								</view>
								<text>{{ userInfo.mobile }}</text>
							</view>
							<view class="icon">
								<image :src="baseImgUrl + '/mine/right.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>

					<view class="item" @click="handleQrCode">
						<view class="name">
							<text>微信二维码</text>
						</view>
						<view class="value">
							<view class="info imgBox">
								<image v-if="userInfo.wxQrCode" :src="baseImgUrl2 + '/mine/icon7.png'" mode="widthFix">
								</image>
								<image v-else :src="baseImgUrl2 + '/mine/icon8.png'" mode="widthFix"></image>
								<text v-if="!userInfo.wxQrCode">未上传</text>
								<text v-else>已上传</text>
							</view>
							<view class="icon">
								<image :src="baseImgUrl + '/mine/right.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>

					<view class="qrCode" v-if="userInfo.isCheckRealName == 1">
						<image :src="baseImgUrl + '/mine/qrCode.png'" mode="widthFix"></image>
					</view>
				</view>
			</template>
		</VideoBox>

		<u-picker :show="showGender" :defaultIndex="defaultIndex" :columns="genderList" @confirm="confirmGender"
			@cancel="showGender = false"></u-picker>

		<u-modal :show="showOnbind" title="解绑" content='是否继续解绑该手机号' @confirm="confirmOnbind" :showCancelButton="true"
			@cancel="showOnbind = false"></u-modal>

		<diaBox ref="diaBoxRef4" title="修改昵称" @comfireFunc="handleUpdateUserInfo" :show-btns="true">
			<template slot="dia-cont">
				<view class="phoneBox">
					<view class="inputBox">
						<view class="input">
							<u--input placeholder="请输入昵称" border="surround" v-model="updateInfo.nickName"
								color="#fff"></u--input>
						</view>
					</view>
				</view>
			</template>
		</diaBox>

		<diaBox ref="diaBoxRef5" title="实名认证" @comfireFunc="handleSucReal" :show-btns="true">
			<template slot="dia-cont">
				<view class="phoneBox">
					<view class="inputBox">
						<view class="input">
							<u--input placeholder="请输入真实姓名" border="surround" v-model="real.idName"
								color="#fff"></u--input>
						</view>
					</view>
					<view class="inputBox">
						<view class="input">
							<u--input placeholder="请输入身份证号" color="#fff" border="surround"
								v-model="real.idCode"></u--input>
						</view>
					</view>
				</view>
			</template>
		</diaBox>
		<bindPhone ref="bindPhone" :mobile="phone" @handleSuc="getUserInfo()" :show-cancel="false" :is-close="false" />
		<diaBox ref="diaBoxRef" title="解绑手机号" @comfireFunc="confirmOnbind" :content="'是否确认解绑？'" :show-btns="true">

		</diaBox>
		<diaBox ref="diaBoxRef2" title="绑定手机号" @comfireFunc="" :content="'是否确认解绑？'" :show-btns="true">

		</diaBox>
		<diaBox ref="diaBoxRef3" title="修改头像" @comfireFunc="handleChangeAvatar" :show-btns="true">
			<template v-slot:dia-cont>
				<view class="diaCont">
					<view class="uploadBox">
						<view class="img">
							<button size="default" class="avatar-wrapper" open-type="chooseAvatar"
								@chooseavatar="onChooseAvatar">
								<image :src="fakeImgUrl" mode="scaleToFill" />
							</button>
						</view>
					</view>
				</view>
			</template>
		</diaBox>

		<diaBox ref="signingDiaBoxRef" title="发起授权" @comfireFunc="handleSucSigning" :show-btns="true"
			:content="'是否确认发起授权申请？'"></diaBox>

		<diaBox ref="wxQrCodeRef" title="修改微信二维码" @comfireFunc="handleChangeWxQrCode" :show-btns="true">
			<template v-slot:dia-cont>
				<view class="diaCont">
					<view class="uploadBox">
						<view class="img">
							<button size="default" class="wxCode" @click="onChooseWxQrCode">
								<view class="imageBox" v-if="fakeWxQrCode">
									<image :src="fakeWxQrCode" mode="scaleToFill" />
								</view>
								<text v-else>点击上传图片</text>
							</button>
						</view>
					</view>
				</view>
			</template>
		</diaBox>
	</view>
</template>

<script>
	import {
		startEid
	} from '../mp_ecard_sdk/main'
	import {
		getWXStatusHeight
	} from '@/utils/index.js'
	import {
		BaseUrl
	} from "@/utils/staticResource";
	import bindPhone from "@/components/bindPhone/index"

	import {
		findCustomerInfoApi,
		updateUserInfo,
		unbindMobileApi,
		bindPhoneApi,
		getCodeApi,
		realNameAuthenticationApi,
		getRealNameAuthResApi,
		changeCertificationApi,
		initiateSigningApi,
		uploadWxQrCodeApi
	} from '../../api/api';
	import diaBox from "@/components/diaBox/index.vue"
	import VideoBox from "@/components/VideoBox/index.vue";

	export default {
		components: {
			VideoBox,
			bindPhone,
			diaBox
		},
		data() {
			return {
				videoUrl: this.$videoUrl,
				baseImgUrl2: '/static',
				seconds: 90,
				// 胶囊的宽度
				barWidth: 0,
				menuHeight: 0,
				userInfo: {
					avatar: '',
					sex: '',
					nickName: '',
					isCheckRealName: 1, // 是否实名认证
					mobile: ''
				},
				defaultIndex: [0], // 性别默认值
				showGender: false, // 显示性别
				genderList: [
					['男', '女']
				],
				isEdit: false, // 是否是编辑
				showCode: false,
				// 解绑
				showOnbind: false,
				phone: '',
				// 显示改变昵称
				showChangeNickName: false,
				updateInfo: {},
				baseImgUrl: this.$baseImgUrl,
				// 显示绑定实名认证
				showRealName: false,
				// 实名认证
				real: {},
				eidToken: '',
				// 头像临时存储
				avatarUrl: '',
				fakeImgUrl: '',
				// 微信二维码
				wxQrCode: '',
				fakeWxQrCode: '',
				SIGNING_STATUS: {
					0: '未授权',
					1: '授权中',
					2: '授权中',
					3: '已授权',
					4: '拒绝授权（点击重新发起）'
				},
			}
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight

			this.getUserInfo()
		},
		methods: {
			// 显示微信上传弹窗
			handleQrCode() {
				this.$refs.wxQrCodeRef.show = true
				const url = BaseUrl.substring(0, BaseUrl.length - 1)
				this.fakeWxQrCode = url + JSON.parse(JSON.stringify(this.userInfo.wxQrCode))
			},
			// 确认上传微信二维码
			async handleChangeWxQrCode() {
				const data = {
					wxQrCode: this.wxQrCode
				}
				const res = await uploadWxQrCodeApi(data)
				if (res.code === 200) {
					this.getUserInfo()
					this.$refs.wxQrCodeRef.show = false
				}
			},
			// 显示签约弹窗
			handleSigning() {
				if (this.userInfo.isSigning === 0 || this.userInfo.isSigning === 4) {
					this.$refs.signingDiaBoxRef.show = true
				}
			},
			// 发起签约
			async handleSucSigning() {
				const res = await initiateSigningApi()
				if (res.code === 200) {
					this.$toast("发起签约成功")
					this.getUserInfo()
				}
				this.$refs.signingDiaBoxRef.show = false

			},
			// 改变微信二维码
			handleChangeAvatar() {
				this.updateInfo.wxQrCode = this.wxQrCode

			},
			// 改变头像
			handleChangeAvatar() {
				this.updateInfo.avatar = this.avatarUrl
				this.handleUpdateUserInfo()
			},
			// 设置头像
			async onChooseWxQrCode(e) {
				uni.chooseImage({
					count: 1,
					// 图片的格式  原图  压缩
					sizeType: ['original', 'compressed'],
					// 图片的来源  相册  照相机
					sourceType: ['album', 'camera'],
					success: data => {
						console.log(data, "Data");
						let filePath = data.tempFilePaths[0];
						const token = uni.getStorageSync("token");
						uni.uploadFile({
							url: this.$baseUrl + "common/upload",
							filePath,
							name: 'file',
							header: {
								Authorization: "Bearer " + token
							},
							success: (res) => {
								const res1 = JSON.parse(res.data)
								this.wxQrCode = res1.fileName
								this.fakeWxQrCode = res1.url
							}
						})
					}
				})
			},
			// 设置头像
			async onChooseAvatar(e) {
				const data = {
					file: e.detail.avatarUrl
				}

				const token = uni.getStorageSync("token");

				let a = uni.uploadFile({
					url: this.$baseUrl + "/common/upload",
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						Authorization: "Bearer " + token
					},
					success: (res) => {
						const res1 = JSON.parse(res.data)
						this.avatarUrl = res1.fileName
						this.fakeImgUrl = res1.url
					}
				})
			},
			// 更换头像
			showUploadQrCode() {
				this.wxQrCode = this.userInfo.wxQrCode
				this.fakeWxQrCode = this.userInfo.wxQrCode
				this.$refs.diaBoxRef3.show = true
			},
			// 更换头像
			showUploadAvatar() {
				this.avatarUrl = this.userInfo.avatar
				this.fakeImgUrl = this.userInfo.avatar

				this.$refs.diaBoxRef3.show = true
			},
			// 解绑手机
			handleUnBind() {
				this.$refs.diaBoxRef.show = true
			},
			// 确认实名认证
			async handleSucReal() {
				if (!this.real.idName) return this.$toast("请输入姓名")
				if (!this.real.idCode) return this.$toast("请输入身份证号")
				const _this = this
				const res = await realNameAuthenticationApi(this.real)
				console.log(res, "res");
				if (res.code == 200) {
					this.eidToken = res.data.eidToken
					startEid({
						data: {
							token: this.eidToken,
						},
						async verifyDoneCallback(res) {
							const {
								token,
								verifyDone
							} = res;

							const res1 = await getRealNameAuthResApi({
								eidToken: token
							})
							if (res1.code == 200) {
								// 认证成功
								if (res1.data.code == 0) {
									// 修改用户实名信息
									const res2 = await changeCertificationApi(_this.real.idCode)
									if (res2.code == 200) {
										_this.closePop()
										_this.$toast("实名成功")
										_this.getUserInfo()
										_this.$refs.diaBoxRef5.close()
									}
								}
								console.log(res1, "验证结果")
							}
							console.log('收到核身完成的res:', res);
							console.log('核身的token是:', token);
							console.log('是否完成核身:', verifyDone);
						},
					});
				}
			},
			// 实名认证
			handleAuthentication() {
				console.log(this.userInfo.isCheckRealName, "this.userInfo.isCheckRealName");
				if (this.userInfo.isCheckRealName == 1) return
				this.$refs.diaBoxRef5.show = true


			},
			// 绑定
			handleBind() {
				this.phone = this.userInfo.mobile
				this.$refs.bindPhone.show()
			},
			// 继续解绑
			async confirmOnbind() {
				const res = await unbindMobileApi()
				if (res.code == 200) {
					this.showOnbind = false
					this.userInfo.mobile = ""
					const userInfo = uni.getStorageSync("userInfo")
					userInfo.isBindMobile = 0
					uni.setStorageSync("userInfo", userInfo)
					this.$refs.bindPhone.showCode = true
					this.$refs.diaBoxRef.close()
				}
			},
			// 获取用户信息
			async getUserInfo() {
				const res = await findCustomerInfoApi()
				if (res.code == 200) {
					this.userInfo = res.data
					uni.setStorageSync("userInfo", res.data)
					if (res.data.sex == "女") this.defaultIndex = [1]
				} else {
					console.log("1111");
					this.$refs.bindPhone.showCode = true
				}
			},
			// 关闭所有弹窗
			closePop() {
				this.showGender = false
				this.showChangeNickName = false
				this.updateInfo = {}
				this.showRealName = false
				this.real = {}
				this.$refs.diaBoxRef3.show = false
				this.$refs.diaBoxRef4.show = false
			},
			// 保存
			async handleUpdateUserInfo() {
				uni.showToast({
					title: '保存成功',
					duration: 1000
				});


				const data = {
					...this.userInfo,
					...this.updateInfo
				}
				data.avatar = this.avatarUrl.replace(/^(https?:\/\/[^\/]+)\//, '/');
				data.wxQrCode = this.avatarUrl.replace(/^(https?:\/\/[^\/]+)\//, '/');
				delete data.sex
				const res = await updateUserInfo(data)
				this.closePop()
				if (res.code == 200) {
					this.getUserInfo()
					this.$refs.diaBoxRef3.close()
				}
			},
			handleShowGender() {
				this.showGender = true
			},
			// 确认选择性别
			confirmGender(e) {
				this.updateInfo.sex = e.value[0] == '男' ? 0 : 1
				this.handleUpdateUserInfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imageBox {
		// width: 500rpx;
		// height: 500rpx;
		// position: relative;
		// overflow: hidden;
		// margin: 20rpx auto 0;

		// padding: 20rpx;
		// background: #000000;
		// border-radius: 30rpx;

		image {
			height: 400rpx;
			position: relative;
			left: -50rpx;
		}
	}

	.phoneBox {

		margin-top: 50rpx;

		.inputBox {
			display: flex;
			align-items: center;
			border: 2rpx solid #343539;
			background: rgba(15, 15, 15, 0.41);
			border-radius: 40rpx;
			margin-bottom: 20rpx;
			height: 112rpx;
			padding: 0 32rpx;

			.btn {
				font-weight: 400;
				font-size: 32rpx;
				color: #0FC6C2;
				line-height: 32rpx;
				text-align: right;
				font-style: normal;
			}

			.input {
				flex: 1;
				color: #fff;
			}
		}
	}

	.bgBox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 1;
		background: rgba(0, 0, 0, 0.6);
	}

	.diaCont {
		.uploadBox {
			margin-top: 52rpx;

			text {
				color: #fff;
				font-size: 30rpx;
				text-decoration: underline;
			}

			::v-deep .avatar-wrapper {
				background: transparent;
			}

			.avatar-wrapper {
				background: transparent;
				width: 196rpx;
				height: 196rpx;
				border-radius: 50%;
				overflow: hidden;
				padding: 0 !important;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.tit {
				text-align: center;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
				margin-bottom: 38rpx;
			}

			.img {
				text-align: center;
			}
		}

		.btns {
			.btn {
				width: 100% !important;
			}
		}
	}

	.getAvatarBox {
		padding: 30rpx;
		width: 90vw;
		box-sizing: border-box;
		background: rgba(22, 24, 40, 1);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #5D617E;

		.title2 {
			color: #fff;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			text-align: center;
			font-size: 32rpx;
		}
	}

	.btns2 {
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			display: flex;
			justify-content: center;
			width: 100%;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			margin-top: 44rpx;
		}
	}

	.content {
		position: relative;
		z-index: 99;
		overflow: hidden;

		.items {
			background: rgba(0, 0, 0, 0.52);
			border-radius: 60rpx;

			border: 2rpx solid #5c7577;
			margin: 62rpx 36rpx 0;

			.item {
				min-height: 140rpx;
				padding: 0 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.value {
					display: flex;
					align-items: center;

					.info {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							margin-right: 12rpx;
						}

						.tag {
							background: rgba(15, 198, 194, 0.16);
							border-radius: 14rpx;
							border: 2rpx solid #0FC6C2;
							width: 76rpx;
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 20rpx;

							text {
								font-weight: 500;
								font-size: 24rpx;
								color: #0FC6C2;
								line-height: 24rpx;
								text-align: right;
								font-style: normal;
							}
						}

						image {
							width: 32rpx;
							margin-right: 24rpx;
						}

						text {
							font-size: 28rpx;
							color: #FFFFFF;
						}
					}

					.suc {
						text {
							color: #0FA136;
						}
					}

					.err {
						text {
							color: #F5A4A5;
						}
					}

					.icon {
						margin-left: 26rpx;

						image {
							width: 45rpx;
						}
					}

					.userImg {
						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 56rpx;
						}
					}
				}

				.name {
					text {
						color: #B3B4C3;
						font-size: 28rpx;
					}
				}
			}

			.item1 {
				height: 200rpx;
			}
		}
	}

	.qrCode {
		margin: 50rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 250rpx;
		}
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.outBox {
		background: rgba(0, 0, 0, 0.6);
		min-height: 100vh;
	}
</style>